<template>
  <div class="menu">
    <h2>使用到的svg图标</h2>
    <div v-for="(item, index) in iconList" :key="index" class="icon">
      <svg-icon :icon-class="item" class="svg" />
      <div class="name">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Icon',
  data() {
    return {
      iconList: []
    }
  },
  created() {
    this.getIcons()
  },
  methods: {
    getIcons() {
      const rs = require.context('@/icons/svg', false, /\.svg$/)
      console.log(rs.keys())
      this.iconList = rs
        .keys()
        .map((item) => item.split('/')[1])
        .map((item) => item.split('.')[0])
    }
  }
}
</script>

<style>
h2 {
  width: 100%;
}
.menu {
  display: flex;
  flex-flow: row wrap;
  /* width: 1200px; */
  width: 100%;
  margin: 0 auto;
}
.icon {
  margin: 5px;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid #000;
  text-align: center;
  width: 120px;
  height: 120px;
}
</style>
